<%@page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息管理系统 - 增加通讯录</title>

    <!-- 引入外部字体和样式 -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f4f7fb;
            color: #333;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            max-width: 900px;
            margin: 50px auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }

        h1 {
            font-size: 28px;
            color: #4a90e2;
            text-align: center;
            margin-bottom: 30px;
        }

        .nav-links {
            text-align: center;
            margin-bottom: 20px;
        }

        .nav-links a {
            font-size: 16px;
            color: #4a90e2;
            margin: 0 15px;
            text-decoration: none;
        }

        .nav-links a:hover {
            text-decoration: underline;
        }

        /* 新增表格外层div样式，用于表格整体居中 */
        .table-wrapper {
            text-align: center;
        }

        table {
            width: 80%; /* 适当调整表格宽度 */
            margin: 20px auto; /* 让表格水平居中 */
            border-collapse: collapse;
        }

        td {
            padding: 12px;
            font-size: 16px;
            vertical-align: middle;
        }

        td input, td select {
            width: 50%; /* 进一步缩小输入框的宽度 */
            padding: 6px; /* 适当减小内边距让输入框更紧凑 */
            margin-top: 5px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        td input[type="text"]:focus, td select:focus {
            border-color: #4a90e2;
            outline: none;
        }

        .form-footer {
            text-align: center;
            margin-top: 20px; /* 增加一点顶部间距，让按钮与表格内容区分更明显 */
        }

        .form-footer input[type="submit"],
        .form-footer input[type="reset"] {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4a90e2;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 0 10px;
            display: inline-block;
        }

        .form-footer input[type="submit"]:hover,
        .form-footer input[type="reset"]:hover {
            background-color: #357ab7;
        }

        .select-container label {
            display: inline-block;
            margin-bottom: 5px;
            font-size: 16px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                width: 95%;
            }

            h1 {
                font-size: 24px;
            }

            td input, td select {
                font-size: 14px;
            }
        }
    </style>
    <script>
        function validateForm() {
            // 获取各个输入框的值
            var name = document.getElementsByName("name")[0].value;
            var phone = document.getElementsByName("phone")[0].value;
            var email = document.getElementsByName("email")[0].value;
            var workPlace = document.getElementsByName("workPlace")[0].value;
            var QQ = document.getElementsByName("QQ")[0].value;

            // 验证姓名不能为空
            if (name === "") {
                alert("姓名不能为空，请填写姓名！");
                return false;
            }

            // 验证电话号码格式（简单示例，可根据实际更严格要求修改）
            var phonePattern = /^1[3-9]\d{9}$/;
            if (!phonePattern.test(phone)) {
                alert("请输入正确的电话号码格式，例如：138xxxxxxxx");
                return false;
            }

            // 验证邮箱地址格式（简单示例，可根据实际更严格要求修改）
            var emailPattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (!emailPattern.test(email)) {
                alert("请输入正确的邮箱地址格式");
                return false;
            }

            // 验证工作单位不能为空
            if (workPlace === "") {
                alert("工作单位不能为空，请填写工作单位！");
                return false;
            }

            // 验证QQ不能为空（简单验证是否为空，可根据实际情况细化QQ格式验证）
            if (QQ === "") {
                alert("QQ不能为空，请填写QQ号码！");
                return false;
            }

            return true;
        }
    </script>
</head>
<body>

<div class="container">
    <h1>增加联系人</h1>

    <div class="nav-links">
        <a href="http://localhost/LookFriendController/lookFriend">查看通讯录</a>
        <a href="http://localhost/friendManager/updateFriend.jsp">修改联系人</a>
        <a href="http://localhost/friendManager/deleteFriend.jsp">删除联系人</a>
    </div>

    <form action="http://localhost/AddFriendController/addFriend" method="post" accept-charset="UTF-8"
          onsubmit="return validateForm()">
        <!-- 新增表格外层div -->
        <div class="table-wrapper">
            <table>
                <tr>
                    <td>用户姓名</td>
                    <td><input type="text" name="name" required/></td>
                </tr>
                <tr>
                    <td>用户电话</td>
                    <td><input type="text" name="phone" required/></td>
                </tr>
                <tr>
                    <td>邮箱地址</td>
                    <td><input type="text" name="email" required/></td>
                </tr>
                <tr>
                    <td>工作单位</td>
                    <td><input type="text" name="workPlace" required/></td>
                </tr>
                <tr>
                    <td class="select-container">
                        <label for="place">家庭住址</label>
                    </td>
                    <td>
                        <select name="place" id="place">
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="天津">天津</option>
                            <option value="河北">河北</option>
                            <option value="河南">河南</option>
                            <option value="吉林">吉林</option>
                            <option value="黑龙江">黑龙江</option>
                            <option value="内蒙古">内蒙古</option>
                            <option value="山东">山东</option>
                            <option value="山西">山西</option>
                            <option value="陕西">陕西</option>
                            <option value="甘肃">甘肃</option>
                            <option value="宁夏">宁夏</option>
                            <option value="青海">青海</option>
                            <option value="新疆">新疆</option>
                            <option value="辽宁">辽宁</option>
                            <option value="江苏">江苏</option>
                            <option value="浙江">浙江</option>
                            <option value="安徽">安徽</option>
                            <option value="广东">广东</option>
                            <option value="海南">海南</option>
                            <option value="广西">广西</option>
                            <option value="云南">云南</option>
                            <option value="贵州">贵州</option>
                            <option value="四川">四川</option>
                            <option value="重庆">重庆</option>
                            <option value="西藏">西藏</option>
                            <option value="香港">香港</option>
                            <option value="澳门">澳门</option>
                            <option value="福建">福建</option>
                            <option value="江西">江西</option>
                            <option value="湖南">湖南</option>
                            <option value="青海">青海</option>
                            <option value="湖北">湖北</option>
                            <option value="台湾">台湾</option>
                            <option value="其它">其它</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>用户QQ</td>
                    <td><input type="text" name="QQ" required/></td>
                </tr>
                <tr class="form-footer">
                    <td colspan="2">
                        <div style="text-align:center; display:flex; justify-content:center;">
                            <!-- 使用flex布局让按钮更好地水平居中并列显示 -->
                            <input type="submit" value="确定">
                            <input type="reset" value="重置">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</div>

</body>
</html>